<template>
  <!-- destroyOnClose很重要，因为id只能有一个，当父组件key发生变化时新挂载的实例会导致使用同一个id而无法渲染 -->
  <!-- 这时就要设置这个属性使得关闭页面时销毁所有底下子元素 -->
  <a-modal :open="visible" :maskClosable="false" :bodyStyle="{ 'padding': 0 }"
           @cancel="hideModal" :width="width+'mm'" destroyOnClose="true">
    <a-spin :spinning="spinning" style="min-height: 100px">
      <div id="preview_content_tasks"></div>
    </a-spin>
    <template #title>
      <a-space>
        <div style="margin-right: 20px">打印预览</div>
        <a-button :loading="waitShowPrinter" type="primary" @click.stop="print">
          <template #icon>
            <PrinterOutlined/>
          </template>
          打印
        </a-button>
        <a-button type="primary" @click.stop="toPdf">
          <template #icon>
            <PrinterOutlined/>
          </template>
          pdf
        </a-button>
      </a-space>
    </template>
    <template #footer>
      <a-button type="info" @click="hideModal">
        <template #icon>
          <CloseOutlined/>
        </template>
        关闭
      </a-button>
    </template>
  </a-modal>
</template>

<script>
import {
  PrinterOutlined,
  CloseOutlined,
} from '@ant-design/icons-vue';

export default {
  name: "printPreview",
  components: {PrinterOutlined, CloseOutlined},
  props: {},
  data() {
    return {
      visible: false,
      spinning: true,
      waitShowPrinter: false,
      // 纸张宽 mm
      width: 0,
      // 模板
      hiprintTemplate: {},
      // 数据
      printData: {}
    }
  },
  computed: {},
  watch: {},
  created() {
  },
  mounted() {
  },
  methods: {
    hideModal() {
      this.visible = false
    },
    show(hiprintTemplate, printData, width = '210') {
      this.visible = true
      this.spinning = true
      this.width = width
      this.hiprintTemplate = hiprintTemplate
      this.printData = printData
      setTimeout(() => {
        // eslint-disable-next-line no-undef
        $('#preview_content_tasks').html(hiprintTemplate.getHtml(printData))
        this.spinning = false
      }, 500)
    },
    print() {
      this.waitShowPrinter = true
      this.hiprintTemplate.print(this.printData, {}, {
        callback: () => {
          this.waitShowPrinter = false
        }
      })
    },
    toPdf() {
      this.hiprintTemplate.toPdf(this.printData, '打印预览pdf');
    },
  }
}

</script>
